<template>
  <div class="min-vh-100 container-fluid">
    <div class="row justify-content-center">
      <div class="col-12 index col-sm-12 col-md-12 col-lg-9 col-xl-9 d-flex">
        <div class="col-12 col-sm-12 col-md-8">
          <slot name="bodyLeft"> </slot>
        </div>

        <div
          class="col-0 col-sm-0 col-md-4 ml-auto d-none d-sm-none d-md-block"
        >
          <slot name="bodyRight"> </slot>
        </div>

        <div class="fixed-bottom col-1 offset-9 index">
          <ul>
            <li>
              <el-tooltip
                content="快来创作你的文章吧"
                placement="left"
                effect="light"
              >
                <div class="article" @click="create = true">
                  <i class="el-icon-plus"></i>
                </div>
              </el-tooltip>
            </li>
          </ul>

          <el-dialog
            modal-append-to-body
            append-to-body
            title="创作文章"
            :visible.sync="create"
            width="80%"
          >
            <el-form
              ref="ruleForm"
              :rules="rules"
              :model="article"
              label-width="80px"
            >
              <el-form-item label="文章标题" prop="title">
                <el-input
                  placeholder="填写标题"
                  v-model="article.title"
                ></el-input>
              </el-form-item>

              <el-form-item label="文章内容" prop="content">
                <el-input
                  placeholder="填写内容"
                  type="textarea"
                  v-model="article.content"
                ></el-input>
              </el-form-item>

              <el-form-item label="选择话题" prop="tags">
                <el-checkbox-group v-model="article.tags">
                  <el-checkbox label="学习"></el-checkbox>
                  <el-checkbox label="交友"></el-checkbox>
                  <el-checkbox label="旅游"></el-checkbox>
                  <el-checkbox label="美食"></el-checkbox>
                  <el-checkbox label="游戏"></el-checkbox>
                  <el-checkbox label="杂谈"></el-checkbox>
                  <el-checkbox label="吐槽"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="添加图片">
                <el-upload action="http://localhost/" list-type="picture-card">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button @click="create = false">取 消</el-button>
              <el-button type="primary" @click="clean()">清空</el-button>
              <el-button type="success" @click="doCreate()">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BodyLeft from "./BodyLeft.vue";
import BodyRight from "./BodyRight.vue";
import { fake } from "../../assets/fake";
export default {
  components: { BodyLeft, BodyRight },
  data() {
    return {
      create: false,
      article: {
        title: "",
        content: "",
        tags: [],
        imgs: [],
      },
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "字数应在 5 到 15 之间",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "内容不能为空", trigger: "change" },
          {
            min: 5,
            max: 100,
            message: "字数应在 5 到 100 之间",
            trigger: "blur",
          },
        ],
        tags: [
          {
            type: "array",
            required: true,
            message: "至少选择一个话题",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    doCreate() {
      if (fake.self === null) {
        this.$alert("登录后才能发布文章", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        let _this = this;
        let tagsCapacity = [];
        this.article.tags.forEach((value, index) => {
          if (index === 0) {
            tagsCapacity.push({
              content: value,
              type: "success",
            });
          } else if (index % 2 === 0) {
            tagsCapacity.push({
              content: value,
              type: "danger",
            });
          } else if (index % 3 === 0) {
            tagsCapacity.push({
              content: value,
              type: "warning",
            });
          } else if (index % 4 === 0) {
            tagsCapacity.push({
              content: value,
              type: "info",
            });
          }
        });
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            fake.methods.createArticle(
              fake.self.info.id,
              _this.article.title,
              _this.article.content,
              tagsCapacity,
              _this.article.imgs
            );
            this.$notify({
              title: "提示",
              message: "文章发布成功，快去看看吧~",
              type: "success",
            });
            _this.article = {
              title: "",
              content: "",
              tags: [],
              imgs: [],
            };
            _this.create = false;
          } else {
            this.$alert("文章信息不完整，再检查一下吧", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
            return false;
          }
        });
      }
    },
    clean() {
      this.$refs.ruleForm.resetFields();
    },
  },
  mounted() {},
};
</script>

<style scoped>
.row {
  margin-top: 5px;
}
.index {
  padding: 0 0;
}
ul {
  margin-bottom: 50px;
}
li {
  list-style: none;
  margin: 100px 85%;
}
.create {
  position: absolute;
  top: 80%;
}
.article {
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  transition: all 0.2s;
  background-color: #41b883;
}
.article:hover {
  cursor: pointer;
  transition: all 0.2s;
  background-color: #41b883b5;
}
.article span,
i {
  color: white;
  font-size: 14px;
}
</style>